<template>
	<view class="ys">
		<view class="search">
			<input type="text" v-model="name" placeholder="请输入店名" />
			<text @click="search">搜索</text>
		</view>
		<view class="list" v-if="list.length != 0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image src="/static/index/head.png" mode=""></image>
				<view class="info">
					<view class="name">
						{{item.shop_name}}
					</view>
					<view class="phone">
						姓名: {{item.name}}
					</view>
					<view class="phone">
						手机号: <text @click.stop="call(item.phone)">拨打电话</text>
					</view>
					<view class="phone">
						地址: {{item.shop_address}}
					</view>
				</view>
				<button @click="choose(item)">选择</button>
			</view>
		</view>
		<view class="no-list" v-else>
			- 暂无数据 -
		</view>
	</view>
</template>

<script>
	import {
		DianList,
		ChooseDian
	} from "@/api/api.js"
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1,
				name: ''
			}
		},
		onLoad() {
			this.DianList()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.DianList()
			}
		},
		methods: {
			search() {
				this.page = 1
				this.last_page = 1
				this.list = []
				this.DianList()
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			choose(item) {
				ChooseDian({
					code: item.code
				}).then(res => {
					uni.$showMsg(res.message)
					if (res.status == 1) {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/index'
							})
						}, 500)
					}
				})
			},
			DianList() {
				DianList({
					page: this.page,
					shop_name: this.name
				}).then(res => {
					if (res.status == 1) {
						this.list = res.data.data
						this.last_page = res.data.last_page
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		background: #fff;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			font-size: 14px;
			background: #f2f2f2;
			width: 75%;
			padding: 8px 10px;
			border-radius: 4px;
		}

		text {
			background: #6b7490;
			color: #fff;
			display: block;
			width: 20%;
			text-align: center;
			border-radius: 4px;
			padding: 8px 0;
		}
	}

	.list {
		padding: 10px;

		.item {
			display: flex;
			background: #fff;
			border-radius: 5px;
			padding: 6px 10px;
			box-sizing: border-box;
			align-items: center;
			margin-bottom: 10px;

			image {
				width: 50px;
				height: 50px;

			}

			.info {
				flex: 1;
				padding: 0 15px;
				box-sizing: border-box;

				.name {
					font-size: 14px;
					margin-bottom: 3px;
					font-weight: bold;
				}

				.phone {
					font-size: 12px;
					color: #777;
					margin-bottom: 3px;
				}
			}

			button {
				width: 70px;
				height: 35px;
				line-height: 35px;
				font-size: 13px;
				background: #E1ECFE;
				color: #6b7490;
				font-weight: bold;
			}
		}
	}
</style>